<template>
  <div class="my-tabbar-item" @click="$parent.selected = name" :class="{'active': $parent.selected === name }">
    <slot name="icon"></slot>
    <span class="inner-text">{{text}}</span>
    <slot name="tabbar-badge"></slot>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        required: true
      },
      text: {
        type: String
      }
    },
    /* methods: {
      handle ($event) {
        this.$emit('touchstart', $event)
      }
    }, */
    name: 'MyTabbarItem'
  }
</script>

<style lang="scss" scoped>

  @import "../../assets/css/variable";
  @import "../../assets/css/px2rem";

  .my-tabbar-item{
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-decoration: none;
    font-size: 0.75rem;
    color: #5b5b5b;
    position: relative;
  }

  .inner-text{
    height: px2rem($tabbar-height);
    line-height: px2rem($tabbar-height);
  }

  .active{
    color: $theme-color;
  }
</style>
